<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的基本标签</title>
    <style>
        div{
            width: 600px;
            height: 30px;
            background: palegoldenrod;
        }
        a{
            width: 600px;
            height: 30px;
            background: palegoldenrod;
        }
        img{
            height: 30px;
        }
        form{
            font-size: 0;
        }
        input{
            width: 200px;
            height: 30px;
        }
        button{
            width: 50px;
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- 块级元素:1.独占一行;2.可以设置宽高 -->
    <div>div元素，布局使用</div>
    <!-- 无序列表 -->
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>自定义列表标题</dt>
        <dd>自定义列表1</dd>
        <dd>自定义列表2</dd>
        <dd>自定义列表3</dd>
    </dl>
    <!-- 标题标签h1~h6 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <!-- 段落标签 -->
    <p>段落</p>


    <!-- 行内元素：1.可以跟其他行内元素排列在一起;2.不可以设置宽高 -->
    <a href="https://www.baidu.com/">百度</a>
    <span>文字</span>
    <b>加粗</b>
    <i>斜体</i>
    <!-- 行内块元素：1.可以跟其他行内元素排列在一起；;2.可以设置宽高 -->
    <img src="timg1.gif" alt="">

    <!-- 表单 -->
    <form action="">
        <input type="text">
        <button>确定</button>
    </form>
</body>
</html>